<template>
  <div class="product-info">
    <h1 class="product-title">
      {{ productData.subjectTrans ?? '' }}
    </h1>
    <div class="product-price">
      <p>
        <span class="product-price-title">Product Price: </span>
        <span class="product-price-title-price"
          >{{ productData.currencySign || '$' }}{{ goodsPrice }}</span
        >
      </p>
      <!--      <p class="product-price-desc">Price Updated on January 17, 2024</p>-->
    </div>

    <div class="product-sku">
      <div
        class="product-sku-item"
        v-for="(item, index) in skuList"
        :key="index"
      >
        <ProductSkuSelectedBar
          :type="item._type"
          :items="item.attrValueVOs"
          :title="item.attributeNameTrans + ':'"
          @onSkuClick="onSkuClick($event, item.attributeId)"
        />
      </div>
      <!--      <div class="product-sku-item" v-if="skuColorArray.length">-->
      <!--        <ProductSkuSelectedBar-->
      <!--          type="image"-->
      <!--          :items="skuColorArray"-->
      <!--          title="Color:"-->
      <!--          @onSkuClick="onSkuClick"-->
      <!--        />-->
      <!--      </div>-->
      <!--      <div class="product-sku-item" v-if="skuSizeArray.length">-->
      <!--        <ProductSkuSelectedBar-->
      <!--          type="text"-->
      <!--          :items="skuSizeArray"-->
      <!--          title="Size:"-->
      <!--          @onSkuClick="onSkuClick"-->
      <!--        />-->
      <!--      </div>-->
      <div class="product-sku-item">
        <ProductSkuSelectedBar
          type="num"
          title="QTY:"
          @onSkuClick="onSkuClick"
        />
      </div>
    </div>

    <div class="product-fee">
      <!--      <div class="product-fee-card">-->
      <!--        <p class="product-fee-card-title">Shipping Fee</p>-->
      <!--        <p class="product-fee-card-price">$4.50</p>-->
      <!--      </div>-->
      <div class="product-fee-card">
        <p class="product-fee-card-title">Total Price</p>
        <p class="product-fee-card-price">
          ${{ (goodsPrice * qtyNum).toFixed(2) }}
        </p>
      </div>
    </div>
    <div class="product-release">
      <el-button
        type="danger"
        class="product-release-button"
        @click="onProductReleaseClick"
        >Product Release
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElButton, ElMessageBox } from 'element-plus'
import { computed, defineProps, onMounted, PropType, ref } from 'vue'
import ProductSkuSelectedBar from './ProductSkuSelectedBar.vue'

const props = defineProps({
  productData: {
    type: Object as PropType<any>,
    required: true,
    default: () => {}
  }
})

const emit = defineEmits(['onSkuImageClick'])

const skuList = ref<any[]>([])
const selectSkuValues = ref<any[]>([])
const skuVOs = ref(props.productData.skuVOs || [])
const qtyNum = ref(1)

const goodsPrice = computed(() => {
  const selectSkus = selectSkuValues.value
    .map((item) => item.attributeValue)
    .join(',')
  return skuVOs.value.find(
    (item: any) =>
      item.attributeValueVOs.map((i: any) => i.attrVauleTrans).join(',') ===
      selectSkus
  )?.consignPrice
})

onMounted(() => {
  const tempList: any[] = []
  props.productData?.productAttributes?.forEach((item: any) => {
    if (
      selectSkuValues.value.indexOf(
        (_item: any) => _item.attributeId === item.attributeId
      ) === -1
    ) {
      selectSkuValues.value.push({
        attributeId: item.attributeId,
        attributeValue: item.attrValueVOs[0]?.attrVauleTrans
      })
    }
    if (item.attrValueVOs?.length > 0) {
      if (item.attrValueVOs[0]?.skuImageUrl) {
        item['_type'] = 'image'
      } else {
        item['_type'] = 'text'
      }
      tempList.push(item)
    }
  })
  skuList.value = tempList
})

const onSkuClick = (obj: any, attributeId: string) => {
  const { value, type } = obj
  if (type === 'num') {
    qtyNum.value = value
  } else {
    if (type === 'image') {
      //图片SKU点击主图切换
      emit('onSkuImageClick', value.skuImageUrl)
    }
    const findItem = selectSkuValues.value.find(
      (item: any) => item.attributeId === attributeId
    )
    findItem.attributeValue = value.attrVauleTrans
  }
}
const onProductReleaseClick = () => {
  //https://app.wiio.io/CustomPreviewProduct/Preview
  ElMessageBox({
    title: 'Tips',
    message: 'Release success, Open Wiio Product',
    autofocus: true,
    type: 'success',
    cancelButtonText: 'cancel',
    showCancelButton: true,
    confirmButtonText: 'Open',
    callback(value: string) {
      if (value === 'confirm') {
        setTimeout(() => {
          window.open('https://app.wiio.io/CustomPreviewProduct/Preview')
        }, 300)
      }
    }
  })
}
</script>

<style scoped>
.product-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-title {
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 25.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  margin-top: 16px;
  background-color: #f9f3f4;
  color: #fa4756;
  padding: 16px 24px 16px 24px;

  .product-price-title {
    font-size: 14px;
  }

  .product-price-price {
    font-size: 30px;
  }

  .product-price-desc {
    color: #999999;
  }
}

.product-info p:nth-of-type(1) {
  font-weight: 600;
  font-size: 30px;
  line-height: 42px;
}

.product-info p:nth-of-type(2) {
  font-weight: 400;
  font-size: 12px;
  line-height: 16.8px;
}

.product-sku {
  /* background-color: aquamarine; */
  margin-top: 24px;
  margin-bottom: 32px;

  .product-sku-item {
    margin-bottom: 16px;
  }
}

.product-fee {
  display: flex;
  background-color: #f5f5f5;
  height: 72px;
  padding: 16px 24px 16px 24px;

  .product-fee-card {
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 16px;

    .product-fee-card-title {
      font-weight: 400;
      font-size: 12px;
      line-height: 16.8px;
      color: #999999;
    }

    .product-fee-card-price {
      font-weight: 500;
      font-size: 14px;
      line-height: 19.6px;
      color: #fa4756;
    }
  }
}

.product-release {
  margin-top: 32px;
  margin-bottom: 15px;

  .product-release-button {
    background-color: #fa4756;
    width: 249px;
    height: 40px;
  }
}

.sku-value {
  font-size: 12px;
}

.group-card-n {
  margin-right: 18px;
  width: 66px;
  height: 66px;
  border-radius: 4px;
  border: 1px solid #e5e5e5; /* 更简洁的方式合并 border-color 和 border-width */
  box-sizing: border-box; /* 保证边框宽度包含在元素总宽度内 */
}

.group-card-s {
  margin-right: 18px;
  width: 66px;
  height: 66px;
  border-radius: 4px;
  border: 2px solid #fa4756; /* 更简洁的方式合并 border-color 和 border-width */
  box-sizing: border-box; /* 保证边框宽度包含在元素总宽度内 */
}
</style>
